ARIA: Rolle `group`

Die Rolle group identifiziert eine Gruppe von Benutzeroberflächen-Objekten, die nicht von assistiven Technologien in einer Seitenzusammenfassung oder einem Inhaltsverzeichnis berücksichtigt werden sollen.

Beschreibung

Am engsten verwandt mit dem HTML-Element <fieldset>, wird die Dokumentstrukturrolle group verwendet, um eine Gruppe von Benutzeroberflächen-Objekten zu identifizieren, die im Vergleich zu region nicht in die Zusammenfassung der Seite oder das Inhaltsverzeichnis aufgenommen werden soll.

Die Rolle group sollte verwendet werden, um eine logische Sammlung von Elementen mit verwandter Funktionalität zu bilden, wie z.B. Kinder in einem tree-Widget, die eine Sammlung von Geschwistern in einer Hierarchie bilden, oder eine Sammlung von Elementen, die im selben Container in einem directory enthalten sind.

Wenn ein group im Kontext einer list verwendet wird, beschränken Sie die Kinder des group auf listitem-Elemente. In diesem Fall wird empfohlen, mehrere geordnete oder ungeordnete Listen, <ol> oder <ul>, mit verschachtelten <li>-Kindern zu verwenden.

Wenn sie im Kontext eines listbox verwendet werden, sind nur <option> Elemente als Kinder zulässig. In diesem Fall wird empfohlen, <select>, <option> und <optgroup> zu verwenden.

Group-Elemente können verschachtelt werden.

Die Rolle group sollte nicht für wesentliche wahrnehmbare Abschnitte einer Seite verwendet werden. Wenn ein Abschnitt so signifikant ist, dass er in das Inhaltsverzeichnis der Seite aufgenommen werden sollte, verwenden Sie die Rolle region oder eine Standard-Landmark-Rolle.

Wenn die Rolle zu einem Element hinzugefügt wird, sendet der Browser ein zugängliches Gruppenereignis an assistive Technologien, die den Benutzer darüber informieren können.

Beispiele

Das folgende HTML-Codebeispiel verwendet die Rolle group mit einer tree-Sicht:

html
<div id="tree1" role="tree" tabindex="-1">
  <div
    id="animals"
    class="groupHeader"
    role="presentation"
    aria-owns="animalGroup"
    aria-expanded="true">
    <img role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
    <span role="treeitem" tabindex="0">Animals</span>
  </div>
  <div id="animalGroup" role="group">
    <div id="birds" role="treeitem">
      <span tabindex="-1">Birds</span>
    </div>
    <div
      id="cats"
      class="groupHeader"
      role="presentation"
      aria-owns="catGroup"
      aria-expanded="false">
      <img role="presentation" tabindex="-1" src="images/treeContracted.gif" />
      <span role="treeitem" tabindex="0">Cats</span>
    </div>
    <div id="catGroup" role="group">
      <div id="siamese" role="treeitem">
        <span tabindex="-1">Siamese</span>
      </div>
      <div id="tabby" role="treeitem">
        <span tabindex="-1">Tabby</span>
      </div>
    </div>
  </div>
</div>

Das nächste Beispiel verwendet die Rolle group mit einem Dropdown-menu, das menuitems enthält:

html
<div role="menu">
  <ul role="group">
    <li role="menuitem">Inbox</li>
    <li role="menuitem">Archive</li>
    <li role="menuitem">Trash</li>
  </ul>
  <ul role="group">
    <li role="menuitem">Custom Folder 1</li>
    <li role="menuitem">Custom Folder 2</li>
    <li role="menuitem">Custom Folder 3</li>
  </ul>
  <ul role="group">
    <li role="menuitem">New Folder</li>
  </ul>
</div>

Dieses Menü könnte mit <select> und <option>-Elementen konstruiert werden. In diesem Fall wäre die Rolle group am ähnlichsten dem Element <optgroup>.

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# group

Siehe auch